/* Base portal colour token defaults - editing these will override branding settings */
:root {
  /* Brand colours */
  --eggplant: #510931;
  --slate-blue: #476C99;
  --orange: #F16E22;
  --evergreen: #009254;
  --flow-blue: #0066F6;
  --off-white: #FFF9ED;
  --sky-blue: #65BBC9;
  --yellow: #FFE159;
  --spring-green: #68DC85;
  --powder-blue: #CDEEFF;
  
  --color-tag-bg: var(--flow-blue);
  --color-tag-text: white;
/*
  --color-body-text: var(--primary);
  --color-body-bg: white;
  --color-nav-bg: white;
  --color-nav-text: var(--primary-mid);
  --color-button-bg: var(--primary);
  --color-button-text: white;
  --color-link: var(--info);
  --color-footer-bg: var(--primary);
  --color-footer-text: white;
*/
/* Derived tokens - set automatically from branding, or override directly */
/*  
  --color-content-link                                                                
  --color-tag-bg                                                               
  --color-tag-text
  --color-button-success-bg                                                          
  --color-button-success-text                                                          
  --color-highlight
*/
}                                                            

/* root variables cannot be used in media queries so here for reference only:
  36em/57.6rem phone (Small devices (landscape phones, 576px and up)
  48em/76.8rem tablet (Medium devices (tablets, 768px and up)
  62em/99.2rem desktop (Large devices (desktops, 992px and up)
  75em/120rem large desktop (Large devices (desktops, 1200px and up)
  120em/192rem Pro/designer desktop (Large devices (desktops, 1920px and up, e.g. most pro design screens)
*/
/* Note: We use a mix of "em" and "rem" dimensions throughout this css.
Therefore adjusting body font size will alter any media queries and other dimensions that are based on "em".
Feel free to change but be aware of possible unintended consequences :)  */

/* Hot Sans */
@font-face {
  font-family: 'Hot Sans';
  src: url("https://cdn-iad.brandkit.com/uploads/881/themes/888/fonts/HotSans-Regular.woff2?v=63957167721");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hot Sans';
  src: url("https://cdn-iad.brandkit.com/uploads/881/themes/888/fonts/HotSans-Bold.woff2?v=63957167700");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Mori */
@font-face {
  font-family: 'Mori Black';
  src: url("https://cdn-iad.brandkit.com/uploads/881/themes/888/fonts/PPMori-Black.woff2?v=63957167744");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.body {
  font-family: 'Hot Sans', Helvetica, Arial, sans-serif;
  font-size: 1.6rem;
}
.lead { line-height: 1.5; }
.welcome-paragraph { font-size: 2rem; }
.center { text-align: center; }

h1, h2, h3, h4, h5 {font-family: 'Mori Black'};

b, strong {font-weight: 700;}

/* custom styling hero text - there is more hero styling in Carousel section */
.hero-heading {
  color: var(--yellow);
  transform: rotate(-2.68deg);
  line-height: 0;
  font-size: 6rem;
}

.subheading {
  color: var(--eggplant);
  line-height: 0;
}

@media screen and (min-width: 88em) {
  .hero-heading {font-size: 10rem;}
  .subheading {font-size: 4rem;}
  .lead {font-size: 1.3em;}
}
/* ---------------------------------
    Navbar styles
   --------------------------------- */
.navbar-section {
  padding-top: 0;
  padding-bottom: 0;
}

/* caret icon changes direction when menu is open - preview bar and search filters too */
.dropdown-button:focus-within .css-icon-caret-down,
.filter-name:focus-within .css-icon-caret-down {
  transform: rotate(180deg);
}

/* Hide logo and account name on mobile */
.account-logo .logo {
  display: none;
  max-height: 4rem;
}

span.account-name {
  font-size: 1.6rem;
  display: none;
}

@media (min-width: 62em) {
  /* Adjust height and spacing for logo on desktop */
  .navbar-section {
    height: 10rem;
  }

  .account-logo .logo,
  span.account-name {
    display: block;
    height: 10rem;
    max-height: 10rem;
    padding: 0.5em 0;
  }
  
  /* nav dropdown desktop */
  .navbar-section-content .dropdown-content {
    max-height: 80vh;
    overflow-y: scroll;
  }
}
/* footer curvy top */
.footer-section {
  --wave: clamp(1.5rem, 5.5vw, 5rem);
  position: relative;
  margin-top: var(--wave);
}

.footer-section::before {
  content: "";
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0;
  width: 100%;
  height: var(--wave);
  background: inherit;
  pointer-events: none;
  clip-path: shape(
    from 0% 45%,
    curve to 24% 0% with 8% 18% / 14% 0%,
    curve to 62% 95% with 34% 0% / 50% 95%,
    curve to 100% 2% with 74% 95% / 90% 3%,
    vline to 100%,
    hline to 0%,
    close
  );
}

footer h3 {
  color: var(--yellow);
  font-size: 2rem;
}

.footer-row {
  display: flex;
  align-items: start;
  width: 100%;
  flex-direction: column;
}

.quicklinks {
  display: flex;
  font-size: 1.6rem;
  column-gap: 4rem;
  row-gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

.quicklinks a {
  text-decoration: none;
}

.footer-menu-links li {
  padding: 0;
}

.footer-top article.social-links {justify-content: center; gap: 2rem;}

.brands {text-align: center;}
.brands img {max-width: 20rem;}
.brands .flex-column {align-items: center;}

@media screen and (min-width: 62em) {
  .footer-top {
    flex-direction: column;
    gap: 4rem;
  }
  
  .footer-top-section-left {width: 25%}
  .footer-top-section-right {width: 75%;}
  
  .footer-row {
    flex-direction: row;
  }
  
  .quicklinks {
    flex-direction: column;
    gap: 0;
  }
  
  .footer-top article.social-links {justify-content: flex-start;}

  .brands {text-align: left;}
  .brands .flex-column {align-items: flex-start; justify-content: space-around;}
}

@media screen and (min-width: 88em) {
  .footer-top-section-left {width: 50%}
  .footer-top-section-right {width: 50%;}
}


.css-icon-world {
  --icon-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /><path d="M3.6 9h16.8" /><path d="M3.6 15h16.8" /><path d="M11.5 3a17 17 0 0 0 0 18" /><path d="M12.5 3a17 17 0 0 1 0 18" /></svg>');
}
/* ---------------------
   Main Elements
   --------------------- */

.main {margin-top: 7rem;}
@media screen and (min-width: 62em) {.main {margin-top: 10rem;}}
.preview-mode .main {padding-top: 6rem;}

.change-grid-view .icon-text,
.feed-view .feed-asset-type-icon {
  display: none;
}/* Grid assets and Asset details page */

/* content additions */
.asset-info span:not(.asset-id, .asset-source):before,
.AssetView .asset-size:before,
.AssetView .asset-dimensions:before,
.AssetView .asset-word-count:before {
  content: ' • ';
}

.AssetView .asset-latitude:before {
  content:'Latitude: ';
}

.AssetView .asset-longitude:before {
  content:'Longitude: ';
}

.asset-source:before {
  content: 'src: ';
}

.asset-licence-value:before {
  content: ' -';
  margin-right: 0.5rem;
}

/* Hidden */
.asset-details-section .asset-type,
.asset-tags-title,
.asset-size-title,
.asset-dimensions-title,
.asset-created-at,
.asset-id-title,
.asset-licence-title,
.asset-word-count-title,
.collections-section-title {
  display: none;
}

/* Layout */

.asset-page-wrapper {
  padding: 2rem 2em;
}
@media (min-width:768px) {
  .asset-page-wrapper {
    padding: 6rem 6em;
  }
}

.asset-page-wrapper .section {
  padding: 1rem 0;
}

.asset-details-section {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.5rem;
  row-gap: 0.9rem;
}

.asset-details-section article {
  flex: 0 0 100%;
}                                                                                                       

.asset-details-section .asset-size,
.asset-details-section .asset-dimensions,
.asset-details-section .asset-extension,
.asset-details-section .asset-id,
.asset-details-section .asset-word-count {
  flex: 0 0 auto;
}

.related-assets-section {
  border-top: 1px dotted color-mix(in srgb, var(--color-body-text) 20%, transparent);
  padding-bottom: 4rem;
}

/* Grid area ordering */ 

.AssetView .asset-name {
  order: 1;
  width: 100%;
}

.AssetView .asset-type-icon {
  order: 2;
}

.AssetView .asset-id {
  order: 3;
}

.AssetView .asset-word-count {
  order: 4;
}

.AssetView .asset-size {
  order: 5;
}

.AssetView .asset-dimensions {
  order: 6;
}

.AssetView .asset-description {
  order: 7;
}

.AssetView .asset-ai-description {
  order: 7;
}

.AssetView .asset-licence {
  order: 8;
}

.AssetView .asset-terms-of-use {
  order: 9;
  padding-bottom: 1rem;
}

.AssetView .asset-expiry-date {
  order: 10;
}

.AssetView .asset-created-at {
  order: 12;
}

.AssetView .asset-credit {
  order: 13;
}

.AssetView .asset-usage {
  order: 14;
}

.AssetView .asset-reference {
  order: 15;
}

.AssetView .asset-account {
  order: 15;
}

.AssetView .asset-location {
  order: 16;
}

.asset-page-wrapper {
  grid-template-areas: "breadcrumb breadcrumb breadcrumb" "proxy proxy proxy" "details details details"  "tags tags tags" "actions actions actions";
}
.asset-page-wrapper.post {
  grid-template-areas: "breadcrumb breadcrumb breadcrumb" "proxy proxy proxy" "tags tags tags" "actions actions actions";
}

@media (min-width:36em) {
  .asset-page-wrapper .section {padding: 0;}
  .asset-page-wrapper .asset-tags-section {padding: 3rem 0;}
  .asset-proxy-section {margin-right: 5rem;}
  .asset-page-wrapper {
    grid-template-areas: "breadcrumb actions actions" "proxy proxy details" "proxy proxy tags";
  }
  .asset-page-wrapper.post {
    grid-template-areas: "breadcrumb actions actions" "proxy proxy proxy" "tags tags tags";
  }
}/*
 * Signup page — overridable styles.
 *
 * 1) Custom properties that drive the app-rendered parts of the signup
 *    (/accounts/sign-up). Change a value to restyle; delete a line to fall back
 *    to the app default.
 * 2) Styling for the testimonials embed (the right column HTML you author in
 *    Signup configuration). Keep these in sync with the markup you use there.
 */
.bk-wall.new-account-section {
  --signup-panel-bg: #f8f8f8;
  --signup-card-bg: #ffffff;
  --signup-card-border: #bdc3c7;
  --signup-card-radius: 1.2rem;
  --signup-summary-bg: #e9f2ff;
  --signup-accent: #0969da;
  --signup-badge-text: #ffffff;
  --signup-control-bg: #ffffff;
  --signup-control-border: #bdc3c7;
  --signup-control-active-bg: #000000;
  --signup-control-active-text: #ffffff;
  --signup-button-bg: #000000;
  --signup-button-text: #ffffff;
  --signup-check-color: #198754;
  --signup-enterprise-bg: #2e3035;
  --signup-enterprise-text: #ffffff;
}

.signup-terms-content {
  padding-inline: 2rem;
}

.signup-terms-content > summary {
  margin-inline: -2rem;
  padding-right: 1rem;
}

/* Testimonials embed (right column) — matches the HTML authored in Signup
   configuration: a logo, the quote in a <span>, then a <cite>. */
.new-account-embeded-image {
  padding: 10rem;
  text-align: center;
}

.new-account-embeded-image blockquote {
  margin: 0;
  padding: 5rem;
}

.new-account-embeded-image blockquote .logo {
  display: block;
  width: auto;
  margin: 0 auto 1.6rem;
  height:auto;
  max-width:20rem;
}

.new-account-embeded-image blockquote span {
  display: block;
  font-size: 1.6rem;
  line-height: 1.6;
}

.new-account-embeded-image blockquote cite {
  display: block;
  margin-top: 1rem;
  font-style: italic;
  color: #646464;
}
.desktop {display:none;}

@media screen and (min-width: 62em){
  .desktop {display:block;}
  .mobile {display:none;}
}
/* faq styles */

dt {
  font-weight: bold;
}

dt.subtitle {
  border-bottom: 2px solid var(--color-body-text);
  margin: 2rem 0;
}

dt.subtitle:first-child {
  margin: 0 0 2rem 0;
}

dd {
  margin-bottom: 1rem;
}

@media (min-width: 48em) {
  dl {
    column-count: 2;
    column-gap: 5rem;
  }

  .fw dl {
    column-count: 3;
    column-gap: 5rem;
  }
}
/* Wall */

.bk-wall .brandkit-logo,
.bk-wall .logo {
  max-height: 20rem;
}

@media screen and (min-width: 36em) {
  .bk-wall {
    margin: 10em auto;
    padding: 3rem 6rem;
  }
}

@media screen and (min-width: 48em) {
  .bk-wall {
    margin: 10em 4em;
  }
}

.reset-password-section {
  background-color: var(--color-body-bg);
  width: fit-content;
  margin: 0 4em;
}
/* Grid layouts */

.two-col-grid,
.two-one-grid,
.one-two-grid,
.three-col-grid,
.four-col-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(min-content, max-content);
  gap: 2em;
}

.two-col-grid article,
.two-one-grid article,
.one-two-grid article,
.three-col-grid article,
.four-col-grid article {
  display: grid;
  grid-auto-rows: minmax(min-content, max-content);
}

@media (min-width: 48em) {
  .two-col-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6em;
  }

  .two-one-grid {
    grid-template-columns: 2fr 1fr;
    gap: 6em;
  }

  .one-two-grid {
    grid-template-columns: 1fr 2fr;
    gap: 6em;
  }

  .three-col-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4em;
  }

  .four-col-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (min-width: 75em) {
  .four-col-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
section .intro, #intro {
  text-align: center;
}

section.blackbg {
  background-color: #000;
  color: #fff;
}

section.whitebg {
  background-color: #fff;
  color: #000;
}

/* html section */
.html-section {padding: 3rem 2em;}
@media (min-width:62em) {.html-section {padding-inline:3em;}}
@media (min-width:75em) {.html-section {padding-inline:calc(50% - 34.5em);}}
@media (min-width:120em) {.html-section {padding-inline:calc(50% - 45em);}}
.html-section img {margin:2em auto;}
.html-section p img {margin:0 auto;}
.html-section:first-child {padding-top:6rem;}

/* Section layout utilities */
/* reset section padding on occasion */
.tight-bottom {padding-bottom:0;}
.tight-top {padding-top:0;}
.tight-left {padding-left:0;}
.tight-right {padding-right:0;}
.fat-bottom {padding-bottom:6rem;}
.fat-top {padding-top:6rem;}
.fw {
  width: 100vw;
  padding: 4rem 0;
}

.fw img {
  max-width: 100%;
}

.fw img.padded {
  max-width: 80%;
  margin: auto;
}

.fh {
  padding-top: 0;
  padding-bottom: 0;
}

.wide {
  width: 100vw;
  padding-left: 3rem;
  padding-right: 3rem;
}

@media (min-width:62em) {.wide {padding-left: 8rem; padding-right: 8rem;}}
.bk-button.button-outline {
    color: var(--color-button-text);
    border-color: var(--color-button-text);
}
/* Collections */

.collections-grid .collection {
  aspect-ratio: 3 / 2;
} /* sets aspect ratio of album covers consistently when height is calculated */

/* collection select state */
a.collection-selected {
  border: none;
  box-shadow: none;
}

a.collection-selected img, 
a.collection-selected div.collection-with-no-cover {
  box-shadow: 0 15px 25px 1px var(--color-body-bg);
}

a.collection-selected span.collection-title {
  font-weight: bold;
}
/* end collection select state */
/* carousel */

/* move searchbox up over carousel */
#searchbox.search-box-section.desktop {
  position: relative;
  width: 100%;
  margin-top: calc(-100vw/2.1);
  height: calc(100vw/2.1);
  z-index: 2;
  color: #fff;
  pointer-events: none;
}

/* image overlay with static find your flow squiggle */
section.carousel-section .carousel-slide::after {
  content: '';
  background-image:
    url("https://cdn-iad.brandkit.com/accounts/881/static_files/4AET7WTA8C92HAS2Z7F2H80YXN/find-your-flow-squiggle.png?v=63957170334"),
    linear-gradient(90deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 100%);
  background-position: top right, 0 0;
  background-size: 60rem auto, cover;
  background-repeat: no-repeat, no-repeat;
  position: absolute;
  top: -9rem;
  bottom: 0;
  right: 0;
  left: 0;
}

.prev,
.next {
  opacity: 0;
}

.dot {
  background-color: var(--neutral-mid);
}

.caption {
  position: relative;
  bottom: 4rem;
  left: 2rem;
  z-index: 2;
  text-decoration: none;
  color: #fff;
  opacity: 0.7;
  margin-bottom: -1.6rem;
}

.carousel-hero-text {
  color: #fff;
  text-align: center;
}

/* customise the carousel text */
.search-box-content-text {
  text-align: left;
  width: 50%;
}

@media screen and (min-width: 62em) {
  .search-box-content {
    align-items: flex-start;
    padding: 0 8rem;
  }
}
/* Search */
.search-section {
  max-width: 120rem;
  margin: 5rem auto;
}

.desktop .search-box-component {
  width: 50%;
  pointer-events: auto;
}

@media screen and (max-width: 36em) {
  .search-box input {font-size: 80%;}
}

.assets-button {
  outline: 1px solid var(--color-button-bg);
}

.filters {
  justify-content: center;
}

.filter-options .filter-option:hover {
  background-color: var(--color-button-bg);
  color: var(--color-button-text);
}

.filter-button:hover {
  opacity: 0.7;
}
.map-grid {
  display: block;
}

@media screen and (min-width: 62em) {
  .map-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

.map-list {
  padding: 0;
}

.map-list li {
  list-style: none
}

.map-list a {
  color: var(--color-link);
  text-decoration: none;
  line-height: 3.4rem;
  font-weight: 500;
}

.map-list a.map-selected, .map-list a:hover {
  text-decoration: underline;
  opacity: 0.7;
}

.map-region.selected, .map-region:hover {
  fill: var(--color-link);
  cursor: pointer;
}
.tooltip {
  position: absolute;
  background: #fff8dc;
  color:#000;
  border: 1px solid #fff8dc;
  padding: 1em;
  border-radius: 1em;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 9999;
  width: 300px;
  max-width:25%;
  opacity:0.8;
  transition: opacity 0.2s ease;
}

.tooltip-arrow {
  width: 0;
  height: 0;
  position: absolute;
}

.tooltip[data-position="top"] .tooltip-arrow {
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid #fff8dc;
}

.tooltip[data-position="bottom"] .tooltip-arrow {
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #fff8dc;
}

.tooltip[data-position="left"] .tooltip-arrow {
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 12px solid #fff8dc;
}

.tooltip[data-position="right"] .tooltip-arrow {
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 12px solid #fff8dc;
}

.tooltip button {
  margin-top: 8px;
  margin-right: 8px;
}